<?php
require_once("Config.php");

$jsonStr = "";
$sql = "Select * From gallery";
$res = mysql_query($sql);
if($res){
  $count = mysql_num_rows($res);

  $i=0;
  while($row=mysql_fetch_array($res)){
   
     $jsonStr=$jsonStr."'gallery_data_".$i."':{title:'".$row['title']."',smallPic:'./adm".$row['smallPic']."',largePic:'./adm".$row['largePic']."'}";
     if($i<$count-1)$jsonStr=$jsonStr.',';    
     $i++;
  }  
  $jsonStr = "{".$jsonStr."}";
 
}else{
  echo "Query failure!";
  exit();
}

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Twilight Cocktail Bar | Beijing</title>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/tam.js">
    </script>
    <style type="text/css">

      .twi .pandora .gallery-thumbnail {
        height:85px;
        width:825px;
        position:absolute;
        left:70px;
        bottom:27px;
        overflow:auto;
        overflow-y:hidden;
        SCROLLBAR-FACE-COLOR: #666;
        SCROLLBAR-HIGHLIGHT-COLOR: #333;
        SCROLLBAR-SHADOW-COLOR: #333;
        SCROLLBAR-3DLIGHT-COLOR: #333;
        SCROLLBAR-ARROW-COLOR: #666;
        SCROLLBAR-TRACK-COLOR: #333;
        SCROLLBAR-DARKSHADOW-COLOR: #333;
        SCROLLBAR-BASE-COLOR: #333 ;

      }
      .twi #gallery_currentPic_wrapper {
        border:6px solid #fff;
        background-color:#fff;
        position:absolute;
        zIndex:999;
        display:block;

      }
      .twi .pandora .gallery-thumbnail ul, li {

        list-style-type:none;
        margin:0px;
        padding:0px;
      }
      .twi .pandora .gallery-thumbnail ul {
        display:inline-block;
        height:85px;

      }
      .twi .pandora .gallery-thumbnail ul li {
        display:block;
        width:57px;
        height:57px;
        margin:4px;
        float:left;

      }
      .gallery-thumbnail-was-selected {

        border:1px solid #FFFF99;

      }
      .twi .pandora .gallery-thumbnail img {
        cursor:pointer;
        display:block;
        +
        cursor:hand;
        padding:2px;
      }
      #loadingImg {
        position:absolute;
        left:470px;
        top:321px;
        z-index:998;
      }
      .imgArrow {
        height:28px;
        width:28px;
        position:absolute;
        display:block;
        z-index:1000;
        background-image:url(images/arrow.gif);
        left:0px;
        top:0px;
        display:none;
        cursor:pointer;
        +
        cursor:hand;
      }
      #previousImg {
        background-position:-28px 0px;

      }
      #nextImg {
      }
      #thumbbailMask {
        height:85px;
        width:825px;
        position:absolute;

        background-color:#000;
        display:block;
        left:70px;
        bottom:27px;
        z-index:999;

      }

    </style>
    <link href="css/common.css" rel="stylesheet" type="text/css">
  </head>
  <body class="twi">

    <div class="pandora" id="mainStage">
      <div id="thumbbailMask">
      </div>
      <div class="imgArrow" id="previousImg" title="Previous Image">
      </div>
      <div class="imgArrow" id="nextImg" title="Next Image">
      </div>
      <img id="loadingImg"  src="images/loading.gif"/>

      <div id="gallery_currentPic_wrapper">
      </div>
      <div class="common-page-logo">
      </div>
      <div class="gallery-thumbnail">
        <ul id="thumbnail_wrapper">
        </ul>
      </div>
      <div class="mainMenu-wrapper">
        <div class="mainMenu">
          <ul>
            <li class="menu_home">
              <a href="index.php"><!--HOME--></a>
            </li>
            <li class="menu_aboutUs">
              <a href="aboutus.php"><!--ABOUT US--></a>
            </li>
            <li class="menu_gallery">
              <a href="#" style=" background-position:-236px -18px;"><!--GALLERY--></a>
            </li>
            <li class="menu_menus" >
              <a href="menus.php"><!--MENUS--></a>
            </li>
            <li class="menu_news">
              <a href="news.php"><!--NEWS--></a>
            </li>
            <li class="menu_events">
              <a href="events.php"><!--EVENTS--></a>
            </li>
            <li class="menu_contact">
              <a href="contact.php"><!--CONTACT--></a>
            </li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <strong style="color:#666">Twilight Cocktail Bar</strong> @ Beijing &copy 2010  | Mail:<strong>info@twilightcocktailbar.com</strong> | Tel:<strong> +86 10 5900 5376</strong>
      </div>
    </div>
  </body>
  <script type="text/javascript">
  var fakeData=<?php echo $jsonStr ?>;
    var fake1Data={
      "gallery_data_0":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/1.jpg',
        largePic:'images/gallery/large/1.jpg'

      },
      "gallery_data_1":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/2.jpg',
        largePic:'images/gallery/large/2.jpg'

      },
      "gallery_data_2":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/3.jpg',
        largePic:'images/gallery/large/3.jpg'

      },
      "gallery_data_3":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/4.jpg',
        largePic:'images/gallery/large/4.jpg'

      },
      "gallery_data_4":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/5.jpg',
        largePic:'images/gallery/large/5.jpg'

      },
      "gallery_data_5":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/6.jpg',
        largePic:'images/gallery/large/6.jpg'

      },
      "gallery_data_6":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/7.jpg',
        largePic:'images/gallery/large/7.jpg'

      },
      "gallery_data_7":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/8.jpg',
        largePic:'images/gallery/large/8.jpg'

      },
      "gallery_data_8":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/9.jpg',
        largePic:'images/gallery/large/9.jpg'

      },
      "gallery_data_9":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/10.jpg',
        largePic:'images/gallery/large/10.jpg'

      },
      "gallery_data_10":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/11.jpg',
        largePic:'images/gallery/large/11.jpg'

      },
      "gallery_data_11":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/12.jpg',
        largePic:'images/gallery/large/12.jpg'

      },
      "gallery_data_12":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/13.jpg',
        largePic:'images/gallery/large/13.jpg'

      },
      "gallery_data_13":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/14.jpg',
        largePic:'images/gallery/large/14.jpg'

      },
      "gallery_data_14":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/15.jpg',
        largePic:'images/gallery/large/15.jpg'

      },
      "gallery_data_15":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/16.jpg',
        largePic:'images/gallery/large/16.jpg'

      },
      "gallery_data_16":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/17.jpg',
        largePic:'images/gallery/large/17.jpg'

      },
      "gallery_data_17":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/18.jpg',
        largePic:'images/gallery/large/18.jpg'

      },
      "gallery_data_18":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/19.jpg',
        largePic:'images/gallery/large/19.jpg'

      },
      "gallery_data_19":{
        title:'thumbnail_abc',
        smallPic:'images/gallery/small/20.jpg',
        largePic:'images/gallery/large/20.jpg'
      }

    };
    var app={

      init: function() {
        gallery.imgData = fakeData;
        gallery.fillThumbnail();
        app._showThumbnailMask();
        $(gallery.picBox).css('opacity','0');

        //bind event handler
        $('#thumbnail_wrapper li').bind('click',gallery.thumbnailWasClicked);
        $('#previousImg').bind('click',app.showPreviousImg);
        $('#nextImg').bind('click',app.showNextImg);

        //init views
        $('#gallery_data_0').css('border','2px solid #fff');
        $('#gallery_data_0').css('padding','0px');
        gallery.currentThumbnail = $('#'+gallery.idPrefix+'0');
        var img_ = new Image();
        img_.src= gallery.imgData[gallery.idPrefix+'0'].largePic;
        if(img_.complete) {
          $('#loadingImg').hide();
          app.bigPicHandler(img_);

        } else {
          $('#loadingImg').show();
          img_.onload= function() {
            $('#loadingImg').hide();
            app.bigPicHandler(img_);
          }

        }

      },

      bigPicHandler: function(img_) {
        $(gallery.picBox).append(img_);
        gallery.picBox.css('left',($('#mainStage').width()-$(gallery.picBox).width())/2+'px');
        gallery.picBox.css('top',($('#mainStage').height()-$(gallery.picBox).height())/2+'px');
        $(gallery.picBox).animate({
          opacity:1
        },800, function() {
          app._showArrow();
          app._hideThumbnailMask();
        });

      },

      _____showPreOrNxtImg: function(order) {
        app._showThumbnailMask();
        app._hideArrow();
        var idStr = gallery.idPrefix+(parseInt(order)).toString();
        var o = $('#'+idStr);
        $('#thumbnail_wrapper img').css('border','none');
        $('#thumbnail_wrapper img').css('padding','2px');
        //set thumbnail to a selected view
        $(o).css('border','2px solid #fff');
        $(o).css('padding','0px');
        //hide picBox
        $(gallery.picBox).css('display','' );
        $(gallery.picBox).css('opacity',0 );

        var theImg = new Image();
        theImg.src = gallery.imgData[idStr].largePic;
        gallery.currentThumbnail = o;
        if(theImg.complete) {
          gallery._showCurrentImg(theImg);

        } else {
          $('#loadingImg').show();
          theImg.onload= function() {
            gallery._showCurrentImg(theImg);

          }

        }
      },

      showNextImg: function() {
        if(gallery.currentThumbnail) {
          var count = gallery.getImgCount();
          var order = gallery.getCurrentThumbnailOrder();
          if(order==(count-1).toString()) {
            return;
          } else {

            app._____showPreOrNxtImg(parseInt(order)+1);
          }

        }
      },

      showPreviousImg: function() {
        if(gallery.currentThumbnail) {
          var count = gallery.getImgCount();
          var order = gallery.getCurrentThumbnailOrder();
          if(order=='0') {
            return;
          } else {

            app._____showPreOrNxtImg(parseInt(order)-1);
          }

        }
      },

      _showArrow: function() {
        var padding = 20;
        var leftP =  ($('#mainStage').width()-$(gallery.picBox).width())/2-$('#previousImg').width()-padding;
        var top = ($('#mainStage').height()-28)/2;
        var leftN = ($('#mainStage').width())/2+($(gallery.picBox).width())/2+padding;
        $('#previousImg').css('left',leftP+'px');
        $('#nextImg').css('left',leftN+'px');
        $('#previousImg').css('top',top+'px');
        $('#nextImg').css('top',top+'px');
        var max=gallery.getImgCount();

        var currentOrder  = gallery.getCurrentThumbnailOrder();
        // currentOrder = currentOrder.split('_')[2];

        if(currentOrder!='0')
          $('#previousImg').show();

        if(currentOrder!=(max-1).toString())
          $('#nextImg').show();

      },

      _hideArrow: function() {
        $('#previousImg').hide();
        $('#nextImg').hide();
      },

      _showThumbnailMask: function() {
        $('#thumbbailMask').css({'display':'block','opacity':0.5});

      },

      _hideThumbnailMask: function() {
        $('#thumbbailMask').css('display','none');
      }

    }

    var gallery = {
      currentThumbnail:null,
      imgData:null,
      idPrefix:'gallery_data_',
      getImgCount: function() {
        var max=0;
        for(var n in gallery.imgData) {
          max++;
        }
        return max;
      },

      getCurrentThumbnailOrder: function() {
        if(gallery.currentThumbnail!=null) {
          return $(gallery.currentThumbnail).attr('id').toString().split('_')[2];
        }
        return '0';
      },

      picBox:$('#gallery_currentPic_wrapper'),
      fillThumbnail: function() {

        var i=0;

        for(var item in gallery.imgData) {

          var node = $('<li><img id="'+item.toString()+'" src="'+gallery.imgData[item].smallPic+'" title="'+i+'"></li>');
          $("#thumbnail_wrapper").append(node);
          i++;
        }
        $("#thumbnail_wrapper").css('width',(i*70)+"px");

      },

      _showCurrentImg: function(img) {
        $('#loadingImg').hide();
        $('#gallery_currentPic_wrapper').html("");
        $('#gallery_currentPic_wrapper').append (img);

        gallery.picBox.css('left',($('#mainStage').width()-$(gallery.picBox).width())/2+'px');
        gallery.picBox.css('top',($('#mainStage').height()-$(gallery.picBox).height())/2+'px');

        $(gallery.picBox).animate({
          opacity:1
        },1000, function() {
          app._hideThumbnailMask();
          app._showArrow();

        });

      },

      _hideCurrentImg: function() {
      },

      __clickThumbs: function(obj) {

        var theImg = new Image();
        theImg.src = gallery.imgData[$(obj).attr('id')].largePic;
        gallery.currentThumbnail = obj;
        if(theImg.complete) {
          gallery._showCurrentImg(theImg);

        } else {
          $('#loadingImg').show();
          theImg.onload= function() {
            gallery._showCurrentImg(theImg);

          }

        }
      },

      thumbnailWasClicked: function(e) {
        //get the event object
        var o;
        if($.browser.msie) {
          o=e.srcElement;
        } else {
          o= e.target;
        }
        app._showThumbnailMask();
        app._hideArrow();
        $('#thumbnail_wrapper img').css('border','none');
        $('#thumbnail_wrapper img').css('padding','2px');
        $(o).css('border','2px solid #fff');
        $(o).css('padding','0px');
        if(gallery.currentThumbnail===o)
          return;
        $(gallery.picBox).css('display','' );
        $(gallery.picBox).css('opacity',0 );
        gallery.__clickThumbs(o);

        return false;

      }}

  </script>
  <script type="text/javascript" src="js/common.js">
  </script>
</html>

